<template>
  <div class="home-container">
    <!-- 置顶公告 -->
    <div class="top-announcements" v-if="topAnnouncements.length > 0">
      <el-card>
        <template #header>
          <div class="card-header">
            <h3>系统公告</h3>
            <router-link to="/announcements" class="view-more">
              查看更多 <el-icon><ArrowRight /></el-icon>
            </router-link>
          </div>
        </template>
        <div 
          v-for="announcement in topAnnouncements" 
          :key="announcement.id"
          class="announcement-item"
          @click="viewAnnouncementDetail(announcement.id)"
        >
          <div class="announcement-title">
            <el-tag type="danger" size="small" effect="dark" v-if="announcement.isTop === 1">
              置顶
            </el-tag>
            <el-tag :type="getTagType(announcement.type)" size="small" effect="plain">
              {{ getTypeText(announcement.type) }}
            </el-tag>
            <span class="title-text">{{ announcement.title }}</span>
          </div>
          <div class="announcement-meta">
            <span class="meta-date">{{ formatDate(announcement.createTime) }}</span>
          </div>
        </div>
      </el-card>
    </div>
    
    <home-component />
  </div>
</template>

<script>
import HomeComponent from '@/components/Home.vue'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import moment from 'moment'
import api from '@/api'
import { ArrowRight } from '@element-plus/icons-vue'

export default {
  name: 'HomePage',
  components: {
    HomeComponent,
    ArrowRight
  },
  setup() {
    const router = useRouter()
    const topAnnouncements = ref([])
    
    // 格式化日期
    const formatDate = (date) => {
      if (!date) return '';
      return moment(date).format('MM-DD HH:mm');
    };
    
    // 获取公告类型文本
    const getTypeText = (type) => {
      switch (type) {
        case 'notice': return '公告';
        case 'important': return '重要';
        case 'system': return '系统';
        default: return '公告';
      }
    };
    
    // 获取标签类型
    const getTagType = (type) => {
      switch (type) {
        case 'notice': return 'info';
        case 'important': return 'danger';
        case 'system': return 'warning';
        default: return 'info';
      }
    };
    
    // 获取置顶公告
    const fetchTopAnnouncements = async () => {
      try {
        const response = await api.announcement.getTopAnnouncements();
        if (response && response.code === 0) {
          topAnnouncements.value = response.data || [];
        }
      } catch (error) {
        console.error('获取置顶公告错误:', error);
      }
    };
    
    // 查看公告详情
    const viewAnnouncementDetail = (id) => {
      router.push(`/announcements?id=${id}`);
    };
    
    onMounted(() => {
      fetchTopAnnouncements();
    })
    
    return {
      topAnnouncements,
      formatDate,
      getTypeText,
      getTagType,
      viewAnnouncementDetail
    }
  }
}
</script>

<style scoped>
.top-announcements {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.view-more {
  font-size: 14px;
  color: #409EFF;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.announcement-item {
  padding: 12px 0;
  border-bottom: 1px solid #EBEEF5;
  cursor: pointer;
}

.announcement-item:last-child {
  border-bottom: none;
}

.announcement-item:hover {
  background-color: #F5F7FA;
}

.announcement-title {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.title-text {
  margin-left: 8px;
  font-size: 14px;
  color: #303133;
}

.announcement-meta {
  padding-left: 8px;
  font-size: 12px;
  color: #909399;
}
</style> 